// @ts-nocheck
import React, { useEffect, useState } from 'react';
import {
  NavBar,
  Cell,
  Swiper,
  Rate,
  Sticky,
  Popup,
  PopupPosition,
  Image,
} from 'react-vant';
import { history, useLocation } from 'umi';
import server from '@/utlis/server';
import './showdetail.less';
import 'lib-flexible';
import '@/pages/golobo.less';
import { Passed, Close, QuestionO } from '@react-vant/icons';
export default function showDetail() {
  const [CZTP, setcztp] = useState([
    { num: 3.5, val: '太牛了' },
    { num: 4, val: '非常精彩' },
    { num: 2, val: '一般般' },
    { num: 2.5, val: '还行吧' },
  ]);
  const [data1, setdata1] = useState([]);
  const [value, setValue] = useState(3.5);
  const [statea, setState] = useState<PopupPosition>('');
  const location = useLocation();
  const onClose = () => setState('');
  let goAnchor = () => {
    document.querySelector('#jiejie')?.scrollIntoView({
      behavior: 'smooth',
    });
  };
  let goaaAnchor = () => {
    document.querySelector('#agao')?.scrollIntoView({
      behavior: 'smooth',
    });
  };
  let goxuAnchor = () => {
    document.querySelector('#xuxu')?.scrollIntoView({
      behavior: 'smooth',
    });
  };
  let getdata = async () => {
    let { data } = await server.get('/getplays', {
      params: {
        pagenation: 'nopagenation',
      },
    });
    setdata1(data.data);
  };
  useEffect(() => {
    getdata();
  }, []);
  // console.log(data1);

  return (
    <div className="sd-zong">
      <div className="showdetailtop">
        <NavBar
          onClickLeft={() => {
            history.push('/showhome');
          }}
        />
      </div>
      <div className="sd-jianbian"></div>
      <div className="showdetailinner">
        <div className="sd-inner-top">
          <div className="sd-top-left">
            <img src={location.state.state.image} alt="" />
          </div>
          <div className="sd-top-right">
            <h3>{location.state.state.name}</h3>
            <div className="yanchub">
              <h4>
                演出榜<span>综合热榜NO.1</span>
              </h4>
            </div>
            <p>{location.state.state.price}元</p>
          </div>
        </div>
        <div className="sd-inner-iner">
          <Cell center title={`2023.05.27 / 0.528`} isLink />
          <hr />
          <Cell
            center
            title={`${location.state.state.self}`}
            label="固安县市固东线京津冀国际音乐广场"
            isLink
            onClick={() => {
              history.push('/bdmap');
            }}
          />
          <hr />
          <Cell center isLink>
            <div style={{ fontSize: '0.35rem' }}>
              <span>
                <Close color="#f44336" />
                不支持退
              </span>
              <span>
                <Passed />
                官方票
              </span>
              <span>
                <Passed />
                现场取票
              </span>
              <span>
                <Passed />
                纸质发票
              </span>
            </div>
          </Cell>
          <Cell
            center
            isLink
            title="XX评分"
            onClick={() => {
              history.push('/showevaluate', {
                state: location.state.state,
              });
            }}
          >
            <QuestionO />
          </Cell>
        </div>
        <div className="sd-innder-tuijian">
          <div className="cell-left">
            7.8 <span>推荐</span>
          </div>
          <div className="cell-right">
            <Swiper vertical autoplay={2000}>
              {CZTP.map((image, index) => (
                <Swiper.Item key={image.val}>
                  <h4>{image.val}</h4>
                  <Rate allowHalf value={image.num} onChange={setValue} />
                </Swiper.Item>
              ))}
            </Swiper>
          </div>
        </div>
        <div
          className="huanyiyanse"
          id="jiejie"
          style={{ backgroundColor: '#f5f5f5', height: '0.2rem' }}
        ></div>
        <div className="sd-inner-xiding">
          <Sticky>
            <div className="xid-zong">
              <p
                onClick={() => {
                  goAnchor();
                }}
              >
                介绍
              </p>
              <p
                onClick={() => {
                  goxuAnchor();
                }}
              >
                须知
              </p>
              <p
                onClick={() => {
                  goaaAnchor();
                }}
              >
                推荐
              </p>
              {/* <a href="#xuxu">须知</a>
                            <a href="#tuitui">推荐</a> */}
            </div>
          </Sticky>
        </div>
        <div className="jieshoa">
          <h3>演出介绍</h3>
          <p className="jieshao-p">
            温馨提示: <br />
            1.本项目实行一票一证实名制购票,一张门票对应一个有
            <br />
            效身份证,请提前预填信息,以免耽误抢票.
            <br />
            2.本厂产出门票不支持退换,如无法正常观看,还请自行
            <br />
            处理。
          </p>
          <h4 className="wowowo">
            随着《中国说唱巅峰对决2023》
            <br />
            即将播出
            <br /> 爱奇艺首个综艺衍生音乐节
            <br /> 【说唱巅峰对决音乐节】
            <br />
            正式和大家见面啦！
            <br /> 6月27-28日
            <br />
            落地京津冀国际音乐广场（固安永定城）
            <Image
              lazyload
              src={
                'https://p0.meituan.net/myvideodistribute/19d94f2f8dbed376dc798c6efc8b3a07235228.jpg@750w'
              }
            />
            <br />
            今日公布的全明星阵容
            <br />
            将巅峰概念进行到底
            <br />
            一共24组音乐人
            <br />
            超强的实例阵容!
            <br />
            连续两天的音乐排队!
            <Image
              lazyload
              src={
                'https://p0.meituan.net/myvideodistribute/281b1d81ac8135d68346f1eb974ab34d175444.jpg@750w'
              }
            />
            <br />
            <br />
            <br />
            【演出阵容】
            <br />
            6月27日
            <Image
              lazyload
              src={
                'https://p0.meituan.net/myvideodistribute/39686a32b519bf59c968a2e925f51829145520.jpg@750w'
              }
            />
            M_DSK厂牌旗下95后唱作音乐人，音乐风格多为新流行乐，
            <br />
            嗓音性感浑厚，善用旋律，具备扎实的说唱功力与超前的音乐
            理念，引领了国内新流行乐风潮。
            <Image
              lazyload
              src={
                'https://p0.meituan.net/myvideodistribute/c01c08600caea1cc9d4607e9f77408e6133569.jpg@750w'
              }
            />
            FOX胡天渝，音乐人、唱作歌手。音乐⻛格独具个人特色，兼具说与唱之实力，
            擅⻓以中国⻛元素进行创作，将流行音乐与Hip-hop 、
            R&B相互结合，巧妙融合
            众多不同中国元素，同时歌词凸显文学性，使作品具丰富文化底蕴，传唱度高。
          </h4>
          <div
            className="huahuadebb"
            style={{ backgroundColor: '#f5f5f5', height: '0.2rem' }}
          ></div>
        </div>
        <h3 className="asdasd">购票须知</h3>
        <div className="goupiaoxz" id="xuxu">
          <div className="goupiao-left">
            <p>演出/活动时长</p>
            <h4>以现场为准</h4>
            <p>主要演员</p>
            <h4>以现场为准</h4>
            <p>预约说明</p>
            <h4>无需预约</h4>
            <p>发票说明</p>
            <h4>该项目支持开具纸质发票,请...</h4>
          </div>
          <div className="goupiao-right">
            <p>最低演出曲目</p>
            <h4>120,以现场为准</h4>
            <p>最低演出/活动时长</p>
            <h4>以现场为准</h4>
            <p>儿童说明</p>
            <h4>1.2米一下的儿童监护人的陪...</h4>
            <p>异常购票</p>
            <h4>为了确保广大消费者的利益 ...</h4>
          </div>
        </div>
        <div className="tjzk" onClick={() => setState('bottom')}>
          全部16条购票须知
        </div>
        <div
          className="huahuadebbaa"
          style={{ backgroundColor: '#f5f5f5', height: '0.2rem' }}
        ></div>

        <Popup
          visible={statea === 'bottom'}
          style={{ height: '80%' }}
          position="bottom"
          onClose={onClose}
        >
          <Sticky>
            <h3 className="qwe">
              购票须知<span>X</span>
            </h3>
          </Sticky>
          <div className="jianjieaa">
            <p>演出/活动时长</p>
            <h4>约90分钟（以现场为准）</h4>
            <p>最低演出曲目</p>
            <h4>以现场为准</h4>
            <p>主要演员</p>
            <h4>以现场为主</h4>
            <p>最低演出/活动时长</p>
            <h4>以现场为准</h4>
            <p>预约说明</p>
            <h4>无需预约</h4>
            <p>儿童说明</p>
            <h4>一人一票，儿童须持票入场</h4>
            <p>发票说明</p>
            <h4>
              该项目支持开具纸质发票，请您在演出结束前通过订单详情页提交发票申请，一般演出结束后1个月左右统一由主办方提供，需自付邮费。
            </h4>
            <p>异常购票</p>
            <h4>
              为了确保广大消费者的利益，对于异常订购行为，猫眼演出有权取消相应订单并且通过系统原路退回该订单下全部票款，不予配票。异常订购行为包括但不限于：
              （1）同一用户订购超出限购张数的订单；
              （2）经合理判断为非真实消费者的订购行为，包括但不限于使用软件、爬虫技术等进行恶意刷票；
              （3）通过批量相同或虚构的支付账号、收货地址、收货人、电话号码订购超出限购张数的订单。
            </h4>
            <p>禁止携带物品</p>
            <h4>
              由于安保和版权的原因，大多数演出、展览及比赛场所禁止携带食品、饮料、专业摄录设备、打火机等物品，请您注意现场工作人员和广播的提示，予以配合。
            </h4>
            <p>付款时效提醒</p>
            <h4>
              下单成功后需在指定时间内完成支付，未支付成功的订单，将在下单指定时间后系统自动取消，请及时刷新购票页面进行购买。
            </h4>
            <p>特殊提示</p>
            <h4>
              因市场变化、不可抗力等客观情形以及演出票随订随售的性质，可能会出现演出变更、取消、或正式出票时票品库存不足等情况，该等情形下猫眼客服会及时与您联系并尽快退款。
            </h4>
            <p>实名制购票</p>
            <h4>
              应演出主办单位及相关部门的要求，本场演出实行实名制购票政策，证件支持：身份证/护照/港澳居民来往内地通行证/台湾居民来往大陆通行证
            </h4>
            <p>限购说明</p>
            <h4>每笔订单最多购买2张，以实际购票情况为准</h4>
            <p>退换政策</p>
            <h4>
              票品为有价证券，非普通商品，其背后承载的文化服务具有时效性、唯一性等特征，如非演出变更、演出取消、票品错误的原因，不提供退票品服务，购票时请务必仔细核对并谨慎下单。
            </h4>
            <p>入场规则</p>
            <h4>·身份证检票入场：凭观演人身份证入场</h4>
          </div>
        </Popup>
      </div>
      <div className="weinituijian">
        <div className="wntj-top" id="agao">
          <h3 style={{ margin: '0.3rem' }}>为你推荐</h3>
        </div>
        <div className="wntj-bottom">
          {data1.map((item) => {
            return (
              <div className="ssss">
                <img src={item.image} alt="" />
                <p>{item.name}</p>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
